<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的收藏 - 人才职业生涯规划平台</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        /* 收藏页面特定样式 */
        :root {
            --favorites-bg-color: #f8f9fa;
            --favorites-card-bg: #ffffff;
            --favorites-primary: #4a6fee;
            --favorites-soft-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }
        
        body {
            background-color: var(--favorites-bg-color);
        }
        
        .favorites-page {
            padding-bottom: calc(50px + env(safe-area-inset-bottom, 0));
        }
        
        /* 头部样式 */
        .favorites-header {
            display: flex;
            align-items: center;
            padding: 15px;
            background-color: #fff;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        
        .back-button {
            border: none;
            background: none;
            font-size: 20px;
            color: #333;
            padding: 0 10px 0 0;
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        
        .page-title {
            font-size: 18px;
            font-weight: 600;
            flex: 1;
            text-align: center;
            margin-right: 30px; /* 补偿左侧按钮宽度 */
        }
        
        /* 选项卡样式 */
        .favorites-tabs {
            display: flex;
            background-color: #fff;
            padding: 0 10px;
            border-bottom: 1px solid #eee;
            margin-bottom: 10px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            white-space: nowrap;
            position: sticky;
            top: 55px; /* 头部高度 */
            z-index: 99;
        }
        
        .favorites-tabs .tab {
            padding: 12px 15px;
            font-size: 15px;
            color: #666;
            position: relative;
            cursor: pointer;
            transition: color 0.3s;
        }
        
        .favorites-tabs .tab.active {
            color: var(--favorites-primary);
            font-weight: 500;
        }
        
        .favorites-tabs .tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 15px;
            right: 15px;
            height: 3px;
            background-color: var(--favorites-primary);
            border-radius: 3px 3px 0 0;
        }
        
        /* 收藏容器 */
        .favorites-container {
            display: none;
            padding: 10px 15px;
        }
        
        .favorites-container.active {
            display: block;
        }
        
        /* 职位卡片样式 */
        .job-card {
            display: flex;
            background-color: #fff;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: var(--favorites-soft-shadow);
            text-decoration: none;
            color: inherit;
            position: relative;
        }
        
        .job-card:active {
            background-color: #f9f9f9;
            transform: scale(0.98);
        }
        
        .company-logo {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            overflow: hidden;
            margin-right: 15px;
            flex-shrink: 0;
            background-color: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .company-logo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .card-body {
            flex: 1;
        }
        
        .job-info h3 {
            font-size: 16px;
            font-weight: 600;
            margin: 0 0 5px;
            color: #333;
        }
        
        .company-name {
            font-size: 14px;
            color: #666;
            margin: 0 0 8px;
        }
        
        .tags {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 10px;
        }
        
        .tag {
            display: inline-block;
            padding: 2px 8px;
            font-size: 12px;
            color: #666;
            background-color: #f5f7fa;
            border-radius: 4px;
            margin-right: 8px;
            margin-bottom: 5px;
        }
        
        .card-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .salary {
            color: #ff6b6b;
            font-weight: 600;
            font-size: 14px;
        }
        
        .location {
            color: #666;
            font-size: 13px;
            margin-left: 10px;
        }
        
        .action-buttons {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .like-btn {
            border: none;
            background: none;
            color: #bbb;
            font-size: 20px;
            cursor: pointer;
            padding: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .like-btn.active {
            color: #ff6b6b;
        }
        
        .apply-btn {
            background-color: var(--favorites-primary);
            color: white;
            border: none;
            border-radius: 5px;
            padding: 5px 12px;
            font-size: 13px;
            cursor: pointer;
        }
        
        /* 公司卡片样式 */
        .company-card {
            background-color: #fff;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: var(--favorites-soft-shadow);
            text-decoration: none;
            color: inherit;
            display: block;
            position: relative;
        }
        
        .company-card:active {
            background-color: #f9f9f9;
            transform: scale(0.98);
        }
        
        .company-info h3 {
            font-size: 18px;
            font-weight: 600;
            margin: 10px 0 5px;
        }
        
        .industry {
            color: #666;
            font-size: 14px;
            margin-bottom: 8px;
        }
        
        .description {
            color: #666;
            font-size: 14px;
            margin-bottom: 12px;
            line-height: 1.5;
        }
        
        .company-tags {
            margin-bottom: 15px;
        }
        
        .company-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .job-count {
            color: #666;
            font-size: 14px;
        }
        
        .follow-btn {
            background-color: #eef2ff;
            color: var(--favorites-primary);
            border: none;
            border-radius: 5px;
            padding: 5px 12px;
            font-size: 13px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        
        .follow-btn i {
            margin-right: 5px;
        }
        
        .follow-btn.active {
            background-color: #eef2ff;
        }
        
        /* 活动卡片样式 */
        .activity-card {
            background-color: #fff;
            border-radius: 10px;
            margin-bottom: 15px;
            overflow: hidden;
            box-shadow: var(--favorites-soft-shadow);
            text-decoration: none;
            color: inherit;
            display: block;
            position: relative;
        }
        
        .activity-card:active {
            background-color: #f9f9f9;
            transform: scale(0.98);
        }
        
        .activity-image {
            height: 150px;
            position: relative;
            overflow: hidden;
        }
        
        .activity-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .status {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 3px 8px;
            font-size: 12px;
            color: white;
            border-radius: 4px;
        }
        
        .status.ongoing {
            background-color: #4caf50;
        }
        
        .status.upcoming {
            background-color: #ff9800;
        }
        
        .activity-content {
            padding: 15px;
        }
        
        .activity-content h3 {
            font-size: 16px;
            font-weight: 600;
            margin: 0 0 10px;
        }
        
        .activity-content p {
            font-size: 14px;
            color: #666;
            margin: 5px 0;
        }
        
        .activity-content i {
            margin-right: 5px;
        }
        
        .activity-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #f5f5f5;
        }
        
        .participants {
            font-size: 13px;
            color: #666;
        }
        
        /* 文章卡片样式 */
        .article-card {
            display: flex;
            background-color: #fff;
            border-radius: 10px;
            margin-bottom: 15px;
            overflow: hidden;
            box-shadow: var(--favorites-soft-shadow);
            text-decoration: none;
            color: inherit;
            position: relative;
        }
        
        .article-card:active {
            background-color: #f9f9f9;
            transform: scale(0.98);
        }
        
        .article-image {
            width: 120px;
            height: 100px;
            flex-shrink: 0;
        }
        
        .article-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .article-content {
            flex: 1;
            padding: 12px;
            display: flex;
            flex-direction: column;
        }
        
        .article-content h3 {
            font-size: 15px;
            font-weight: 600;
            margin: 0 0 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .article-summary {
            font-size: 13px;
            color: #666;
            margin: 0 0 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            flex: 1;
        }
        
        .article-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #999;
        }
        
        .article-date {
            margin-right: 10px;
        }
        
        .article-views i {
            margin-right: 3px;
        }
        
        /* 空状态样式 */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #666;
        }
        
        .empty-state img {
            width: 100px;
            height: 100px;
            margin-bottom: 20px;
        }
        
        .empty-state p {
            font-size: 16px;
            margin-bottom: 20px;
        }
        
        .explore-btn {
            background-color: var(--favorites-primary);
            color: white;
            border: none;
            border-radius: 5px;
            padding: 8px 20px;
            font-size: 14px;
            cursor: pointer;
        }
        
        /* 底部导航栏样式 - 与profile页面保持一致 */
        .tab-bar {
            height: 50px; 
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 450px;
            z-index: 1000;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #fff;
            border-top: 1px solid #eee;
            box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.05);
            opacity: 1;
            transition: all 0.3s ease;
            padding-bottom: env(safe-area-inset-bottom, 0);
        }
        
        .tab-bar-hidden {
            transform: translateX(-50%) translateY(100%);
            opacity: 0;
            pointer-events: none;
        }
        
        .tab-bar .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            height: 100%;
            color: #8e8e93;
            font-size: 10px;
            position: relative;
            text-decoration: none;
            padding: 0;
        }
        
        .tab-bar .tab-item.active {
            color: #4a6fee;
            font-weight: normal;
        }
        
        .tab-bar .tab-item i {
            font-size: 20px;
            margin-bottom: 2px;
            transition: all 0.3s ease;
        }
        
        .tab-bar .tab-item span {
            font-size: 10px;
            line-height: 1;
            transition: all 0.3s ease;
        }
        
        .tab-bar .tab-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 16px;
            height: 2px;
            border-radius: 1px;
            background-color: #4a6fee;
        }
        
        /* 学校卡片样式 */
        .school-card {
            display: flex;
            background-color: #fff;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: var(--favorites-soft-shadow);
            text-decoration: none;
            color: inherit;
            position: relative;
        }
        
        .school-card:active {
            background-color: #f9f9f9;
            transform: scale(0.98);
        }
        
        .school-logo {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            overflow: hidden;
            margin-right: 15px;
            flex-shrink: 0;
            background-color: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .school-logo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .school-info h3 {
            font-size: 16px;
            font-weight: 600;
            margin: 0 0 5px;
            color: #333;
        }
        
        .school-type {
            font-size: 14px;
            color: #666;
            margin: 0 0 8px;
        }
        
        .school-tags {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 10px;
        }
        
        .school-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .school-rank {
            color: var(--favorites-primary);
            font-weight: 600;
            font-size: 14px;
        }
        
        .school-location {
            color: #666;
            font-size: 13px;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="app-container favorites-page">
        <!-- 头部导航 -->
        <header class="favorites-header">
            <button class="back-button" onclick="history.back()">
                <i class="bi bi-chevron-left"></i>
            </button>
            <h1 class="page-title">我的收藏</h1>
        </header>

        <!-- 主内容区域 -->
        <main class="main-content">
            <!-- 收藏类型选项卡 -->
            <div class="favorites-tabs">
                <div class="tab active" data-type="all">全部</div>
                <div class="tab" data-type="job">职位</div>
                <div class="tab" data-type="company">公司</div>
                <div class="tab" data-type="school">院校</div>
                <div class="tab" data-type="activity">活动</div>
                <div class="tab" data-type="article">文章</div>
            </div>
            
            <!-- 职位收藏列表 -->
            <div class="favorites-container" id="jobFavorites">
                <a href="internship-detail.html?id=job101" class="job-card">
                    <div class="company-logo">
                        <img src="../img/company-logo1.jpg" alt="字节跳动">
                    </div>
                    <div class="card-body">
                        <div class="job-info">
                            <h3>前端开发工程师</h3>
                            <p class="company-name">字节跳动</p>
                            <div class="tags">
                                <span class="tag">Vue</span>
                                <span class="tag">React</span>
                                <span class="tag">3年经验</span>
                            </div>
                        </div>
                        <div class="card-footer">
                            <span class="salary">25k-35k/月</span>
                            <span class="location">北京</span>
                            <div class="action-buttons">
                                <button class="like-btn active"><i class="bi bi-heart-fill"></i></button>
                                <button class="apply-btn">立即申请</button>
                            </div>
                        </div>
                    </div>
                </a>
                
                <a href="internship-detail.html?id=job102" class="job-card">
                    <div class="company-logo">
                        <img src="../img/company-logo2.jpg" alt="阿里巴巴">
                    </div>
                    <div class="card-body">
                        <div class="job-info">
                            <h3>Java后端开发</h3>
                            <p class="company-name">阿里巴巴</p>
                            <div class="tags">
                                <span class="tag">Java</span>
                                <span class="tag">Spring</span>
                                <span class="tag">微服务</span>
                            </div>
                        </div>
                        <div class="card-footer">
                            <span class="salary">30k-50k/月</span>
                            <span class="location">杭州</span>
                            <div class="action-buttons">
                                <button class="like-btn active"><i class="bi bi-heart-fill"></i></button>
                                <button class="apply-btn">立即申请</button>
                            </div>
                        </div>
                    </div>
                </a>
                
                <a href="internship-detail.html?id=job103" class="job-card">
                    <div class="company-logo">
                        <img src="../img/company-logo3.jpg" alt="腾讯">
                    </div>
                    <div class="card-body">
                        <div class="job-info">
                            <h3>产品经理</h3>
                            <p class="company-name">腾讯</p>
                            <div class="tags">
                                <span class="tag">产品设计</span>
                                <span class="tag">数据分析</span>
                                <span class="tag">本科以上</span>
                            </div>
                        </div>
                        <div class="card-footer">
                            <span class="salary">20k-35k/月</span>
                            <span class="location">深圳</span>
                            <div class="action-buttons">
                                <button class="like-btn active"><i class="bi bi-heart-fill"></i></button>
                                <button class="apply-btn">立即申请</button>
                            </div>
                        </div>
                    </div>
                </a>
                
                <!-- 空状态 -->
                <div class="empty-state" style="display: none;">
                    <img src="../img/empty-favorites.png" alt="暂无收藏">
                    <p>您还没有收藏任何职位</p>
                    <button class="explore-btn">去探索</button>
                </div>
            </div>
            
            <!-- 公司收藏列表 -->
            <div class="favorites-container" id="companyFavorites">
                <a href="company-detail.html?id=comp101" class="company-card">
                    <div class="company-logo">
                        <img src="../img/company-logo1.jpg" alt="字节跳动">
                    </div>
                    <div class="company-info">
                        <h3>字节跳动</h3>
                        <p class="industry">互联网 | 10000人以上</p>
                        <p class="description">字节跳动是全球化的互联网科技公司，总部位于北京，拥有多款流行的应用程序，包括今日头条、TikTok等。</p>
                        <div class="company-tags">
                            <span class="tag">弹性工作</span>
                            <span class="tag">免费三餐</span>
                            <span class="tag">六险一金</span>
                        </div>
                        <div class="company-footer">
                            <span class="job-count">在招 254 个职位</span>
                            <button class="follow-btn active"><i class="bi bi-check-circle-fill"></i> 已关注</button>
                        </div>
                    </div>
                </a>
                
                <a href="company-detail.html?id=comp102" class="company-card">
                    <div class="company-logo">
                        <img src="../img/company-logo2.jpg" alt="阿里巴巴">
                    </div>
                    <div class="company-info">
                        <h3>阿里巴巴</h3>
                        <p class="industry">电子商务 | 10000人以上</p>
                        <p class="description">阿里巴巴集团是中国领先的电子商务公司，提供了包括阿里巴巴、淘宝网、天猫、支付宝等知名平台。</p>
                        <div class="company-tags">
                            <span class="tag">五险一金</span>
                            <span class="tag">年终奖</span>
                            <span class="tag">股票期权</span>
                        </div>
                        <div class="company-footer">
                            <span class="job-count">在招 187 个职位</span>
                            <button class="follow-btn active"><i class="bi bi-check-circle-fill"></i> 已关注</button>
                        </div>
                    </div>
                </a>
                
                <!-- 新增腾讯公司信息 -->
                <a href="company-detail.html?id=comp103" class="company-card">
                    <div class="company-logo">
                        <img src="../img/company-logo3.jpg" alt="腾讯">
                    </div>
                    <div class="company-info">
                        <h3>腾讯</h3>
                        <p class="industry">互联网 | 10000人以上</p>
                        <p class="description">腾讯是中国领先的互联网、移动和通信服务提供商，提供社交网络、游戏、数字内容等多元化服务。</p>
                        <div class="company-tags">
                            <span class="tag">弹性工作</span>
                            <span class="tag">全额医保</span>
                            <span class="tag">带薪休假</span>
                        </div>
                        <div class="company-footer">
                            <span class="job-count">在招 218 个职位</span>
                            <button class="follow-btn active"><i class="bi bi-check-circle-fill"></i> 已关注</button>
                        </div>
                    </div>
                </a>
                
                <!-- 空状态 -->
                <div class="empty-state" style="display: none;">
                    <img src="../img/empty-favorites.png" alt="暂无收藏">
                    <p>您还没有收藏任何公司</p>
                    <button class="explore-btn">去探索</button>
                </div>
            </div>
            
            <!-- 学校收藏 -->
            <div class="favorites-container" id="schoolFavorites">
                <!-- 上海交通大学 -->
                <a href="school-detail.html?id=sch101" class="school-card">
                    <div class="school-logo">
                        <img src="../img/school3.jpg" alt="上海交通大学">
                    </div>
                    <div class="card-body">
                        <div class="school-info">
                            <h3>上海交通大学</h3>
                            <div class="school-type">理工类 · 985/211</div>
                            <div class="school-tags">
                                <span class="tag">机械工程</span>
                                <span class="tag">电子信息</span>
                                <span class="tag">生物医学</span>
                            </div>
                        </div>
                        <div class="school-footer">
                            <div class="school-rank">全国排名：3</div>
                            <div class="school-location">
                                <i class="bi bi-geo-alt-fill"></i>上海
                            </div>
                        </div>
                    </div>
                </a>
                
                <!-- 浙江大学 -->
                <a href="school-detail.html?id=sch102" class="school-card">
                    <div class="school-logo">
                        <img src="../img/school4.jpg" alt="浙江大学">
                    </div>
                    <div class="card-body">
                        <div class="school-info">
                            <h3>浙江大学</h3>
                            <div class="school-type">综合类 · 985/211</div>
                            <div class="school-tags">
                                <span class="tag">计算机</span>
                                <span class="tag">生物工程</span>
                                <span class="tag">医学</span>
                            </div>
                        </div>
                        <div class="school-footer">
                            <div class="school-rank">全国排名：4</div>
                            <div class="school-location">
                                <i class="bi bi-geo-alt-fill"></i>杭州
                            </div>
                        </div>
                    </div>
                </a>
                
                <!-- 新增北京大学 -->
                <a href="school-detail.html?id=sch103" class="school-card">
                    <div class="school-logo">
                        <img src="../img/school1.jpg" alt="北京大学">
                    </div>
                    <div class="card-body">
                        <div class="school-info">
                            <h3>北京大学</h3>
                            <div class="school-type">综合类 · 985/211</div>
                            <div class="school-tags">
                                <span class="tag">人文社科</span>
                                <span class="tag">经济学</span>
                                <span class="tag">法学</span>
                            </div>
                        </div>
                        <div class="school-footer">
                            <div class="school-rank">全国排名：1</div>
                            <div class="school-location">
                                <i class="bi bi-geo-alt-fill"></i>北京
                            </div>
                        </div>
                    </div>
                </a>
                
                <!-- 空状态 -->
                <div class="empty-state" style="display: none;">
                    <img src="../img/empty-favorites.png" alt="暂无收藏">
                    <p>您还没有收藏任何院校</p>
                    <button class="explore-btn">去探索</button>
                </div>
            </div>
            
            <!-- 活动收藏列表 -->
            <div class="favorites-container" id="activityFavorites">
                <a href="activity-detail.html?id=act101" class="activity-card">
                    <div class="activity-image">
                        <img src="../img/activity1.jpg" alt="互联网产品经理实战营">
                        <span class="status ongoing">进行中</span>
                    </div>
                    <div class="activity-content">
                        <h3>互联网产品经理实战营</h3>
                        <p class="time"><i class="bi bi-calendar"></i> 2023-04-15 14:00</p>
                        <p class="location"><i class="bi bi-geo-alt"></i> 线上</p>
                        <div class="activity-footer">
                            <span class="participants"><i class="bi bi-people"></i> 132人参与</span>
                            <button class="like-btn active"><i class="bi bi-heart-fill"></i></button>
                        </div>
                    </div>
                </a>
                
                <a href="activity-detail.html?id=act102" class="activity-card">
                    <div class="activity-image">
                        <img src="../img/activity2.jpg" alt="腾讯2023校园招聘宣讲会">
                        <span class="status upcoming">即将开始</span>
                    </div>
                    <div class="activity-content">
                        <h3>腾讯2023校园招聘宣讲会</h3>
                        <p class="time"><i class="bi bi-calendar"></i> 2023-04-20 10:00</p>
                        <p class="location"><i class="bi bi-geo-alt"></i> 北京大学就业中心</p>
                        <div class="activity-footer">
                            <span class="participants"><i class="bi bi-people"></i> 415人参与</span>
                            <button class="like-btn active"><i class="bi bi-heart-fill"></i></button>
                        </div>
                    </div>
                </a>
                
                <!-- 新增活动 -->
                <a href="activity-detail.html?id=act103" class="activity-card">
                    <div class="activity-image">
                        <img src="../img/activity3.jpg" alt="人工智能行业峰会">
                        <span class="status upcoming">即将开始</span>
                    </div>
                    <div class="activity-content">
                        <h3>2023人工智能行业峰会</h3>
                        <p class="time"><i class="bi bi-calendar"></i> 2023-05-10 09:30</p>
                        <p class="location"><i class="bi bi-geo-alt"></i> 上海国际会议中心</p>
                        <div class="activity-footer">
                            <span class="participants"><i class="bi bi-people"></i> 328人参与</span>
                            <button class="like-btn active"><i class="bi bi-heart-fill"></i></button>
                        </div>
                    </div>
                </a>
                
                <!-- 空状态 -->
                <div class="empty-state" style="display: none;">
                    <img src="../img/empty-favorites.png" alt="暂无收藏">
                    <p>您还没有收藏任何活动</p>
                    <button class="explore-btn">去探索</button>
                </div>
            </div>
            
            <!-- 文章收藏列表 -->
            <div class="favorites-container" id="articleFavorites">
                <a href="article-details.html?id=art101&type=article" class="article-card">
                    <div class="article-image">
                        <img src="../img/article1.jpg" alt="如何准备技术面试">
                    </div>
                    <div class="article-content">
                        <h3>如何准备技术面试：来自Google面试官的建议</h3>
                        <p class="article-summary">本文分享了Google面试官多年面试经验，为技术岗位求职者提供系统的面试准备方法...</p>
                        <div class="article-footer">
                            <span class="article-date">2023-03-15</span>
                            <span class="article-views"><i class="bi bi-eye"></i> 12,543</span>
                            <button class="like-btn active"><i class="bi bi-heart-fill"></i></button>
                        </div>
                    </div>
                </a>
                
                <a href="article-details.html?id=art102&type=article" class="article-card">
                    <div class="article-image">
                        <img src="../img/article2.jpg" alt="2023年最受欢迎的职业">
                    </div>
                    <div class="article-content">
                        <h3>2023年最受欢迎的职业排行榜及薪资分析</h3>
                        <p class="article-summary">基于最新的行业数据，本文分析了2023年就业市场上最受欢迎的职业，并提供了详细的薪资范围...</p>
                        <div class="article-footer">
                            <span class="article-date">2023-04-02</span>
                            <span class="article-views"><i class="bi bi-eye"></i> 8,721</span>
                            <button class="like-btn active"><i class="bi bi-heart-fill"></i></button>
                        </div>
                    </div>
                </a>
                
                <!-- 新增文章 -->
                <a href="article-details.html?id=art103&type=article" class="article-card">
                    <div class="article-image">
                        <img src="../img/article3.jpg" alt="求职简历制作指南">
                    </div>
                    <div class="article-content">
                        <h3>求职简历制作指南：HR眼中的加分项</h3>
                        <p class="article-summary">资深HR分享如何打造一份突出个人优势的简历，包括内容组织、关键词选择和版面设计等方面的建议...</p>
                        <div class="article-footer">
                            <span class="article-date">2023-04-10</span>
                            <span class="article-views"><i class="bi bi-eye"></i> 6,982</span>
                            <button class="like-btn active"><i class="bi bi-heart-fill"></i></button>
                        </div>
                    </div>
                </a>
                
                <!-- 空状态 -->
                <div class="empty-state" style="display: none;">
                    <img src="../img/empty-favorites.png" alt="暂无收藏">
                    <p>您还没有收藏任何文章</p>
                    <button class="explore-btn">去探索</button>
                </div>
            </div>
            
            <!-- 无收藏时的空状态 -->
            <div class="empty-state" id="allEmptyState" style="display: none;">
                <img src="../img/empty-favorites.svg" alt="暂无收藏">
                <p>您还没有收藏任何内容</p>
                <button class="explore-btn">去发现更多</button>
            </div>
        </main>

        <!-- 底部导航栏 -->
        <footer class="tab-bar">
            <a href="../index.html" class="tab-item">
                <i class="bi bi-house-door"></i>
                <span>首页</span>
            </a>
            <a href="discover.html" class="tab-item">
                <i class="bi bi-compass"></i>
                <span>发现</span>
            </a>
            <a href="agents.html" class="tab-item">
                <i class="bi bi-person-rolodex"></i>
                <span>经纪人</span>
            </a>
            <a href="profile.html" class="tab-item active">
                <i class="bi bi-person-fill"></i>
                <span>我的</span>
            </a>
        </footer>
    </div>

    <script src="../js/nav.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tabs = document.querySelectorAll('.favorites-tabs .tab');
            const containers = document.querySelectorAll('.favorites-container');
            
            // 默认显示"全部"标签内容
            showAllContent();
            
            // 处理标签点击事件
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    // 移除所有标签的活动状态
                    tabs.forEach(t => t.classList.remove('active'));
                    // 添加当前标签的活动状态
                    this.classList.add('active');
                    
                    const type = this.getAttribute('data-type');
                    if (type === 'all') {
                        // 显示全部内容
                        showAllContent();
                    } else {
                        // 隐藏所有内容容器
                        containers.forEach(container => {
                            container.style.display = 'none';
                            container.classList.remove('active');
                        });
                        
                        // 显示选中的内容容器
                        const targetContainer = document.getElementById(type + 'Favorites');
                        if (targetContainer) {
                            targetContainer.style.display = 'block';
                            targetContainer.classList.add('active');
                        }
                    }
                });
            });
            
            // 显示所有内容的函数
            function showAllContent() {
                // 隐藏总的空状态
                document.getElementById('allEmptyState').style.display = 'none';
                
                // 显示所有内容容器
                containers.forEach(container => {
                    container.style.display = 'block';
                    container.classList.add('active');
                });
                
                // 隐藏所有空状态
                const emptyStates = document.querySelectorAll('.empty-state');
                emptyStates.forEach(emptyState => {
                    emptyState.style.display = 'none';
                });
            }
            
            // 处理收藏按钮点击
            const likeButtons = document.querySelectorAll('.like-btn');
            likeButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    // 阻止事件冒泡，防止触发卡片的点击事件
                    e.stopPropagation();
                    e.preventDefault();
                    
                    this.classList.toggle('active');
                    
                    // 如果取消收藏，添加动画效果并移除卡片
                    if (!this.classList.contains('active')) {
                        const card = this.closest('.job-card, .company-card, .activity-card, .article-card, .school-card');
                        card.style.transition = 'all 0.3s ease';
                        card.style.opacity = '0';
                        card.style.transform = 'translateX(20px)';
                        
                        setTimeout(() => {
                            card.remove();
                            
                            // 检查当前类型是否还有卡片
                            const currentTab = document.querySelector('.favorites-tabs .tab.active');
                            const type = currentTab.getAttribute('data-type');
                            
                            if (type === 'all') {
                                checkAllContainers();
                            } else {
                                const container = document.getElementById(type + 'Favorites');
                                checkContainer(container, type);
                            }
                        }, 300);
                    }
                });
            });
            
            // 处理申请按钮点击
            const applyButtons = document.querySelectorAll('.apply-btn');
            applyButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    // 阻止事件冒泡，防止触发卡片的点击事件
                    e.stopPropagation();
                    e.preventDefault();
                    
                    // 获取职位ID
                    const jobCard = this.closest('.job-card');
                    if (jobCard) {
                        const jobId = jobCard.getAttribute('href').split('?id=')[1];
                        window.location.href = `application-detail.html?id=${jobId}&action=apply`;
                    }
                });
            });
            
            // 处理关注按钮点击
            const followButtons = document.querySelectorAll('.follow-btn');
            followButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    // 阻止事件冒泡，防止触发卡片的点击事件
                    e.stopPropagation();
                    e.preventDefault();
                    
                    this.classList.toggle('active');
                    if (this.classList.contains('active')) {
                        this.innerHTML = '<i class="bi bi-check-circle-fill"></i> 已关注';
                    } else {
                        this.innerHTML = '<i class="bi bi-plus-circle"></i> 关注';
                        
                        // 如果取消关注，也可以添加动画效果并移除卡片
                        const card = this.closest('.company-card');
                        card.style.transition = 'all 0.3s ease';
                        card.style.opacity = '0';
                        card.style.transform = 'translateX(20px)';
                        
                        setTimeout(() => {
                            card.remove();
                            
                            // 检查当前类型是否还有卡片
                            const currentTab = document.querySelector('.favorites-tabs .tab.active');
                            const type = currentTab.getAttribute('data-type');
                            
                            if (type === 'all') {
                                checkAllContainers();
                            } else {
                                const container = document.getElementById(type + 'Favorites');
                                checkContainer(container, type);
                            }
                        }, 300);
                    }
                });
            });
            
            // 添加文章卡片的点击事件
            const articleCards = document.querySelectorAll('.article-card');
            articleCards.forEach(card => {
                // 处理文章卡片的点击事件
                card.addEventListener('click', function(e) {
                    // 获取文章ID
                    const href = this.getAttribute('href');
                    // 如果点击的是卡片内的按钮则不跳转
                    if (e.target.closest('.like-btn')) {
                        return;
                    }
                    // 跳转到文章详情页
                    if (href) {
                        window.location.href = href;
                    }
                });
            });
            
            // 检查所有容器是否为空
            function checkAllContainers() {
                let allEmpty = true;
                
                containers.forEach(container => {
                    const type = container.id.replace('Favorites', '');
                    const isEmpty = checkContainer(container, type);
                    if (!isEmpty) {
                        allEmpty = false;
                    }
                });
                
                // 如果所有容器都为空，显示总的空状态
                if (allEmpty) {
                    document.getElementById('allEmptyState').style.display = 'block';
                }
            }
            
            // 检查单个容器是否为空
            function checkContainer(container, type) {
                if (container) {
                    const cards = container.querySelectorAll('.job-card, .company-card, .activity-card, .article-card, .school-card');
                    const emptyState = container.querySelector('.empty-state');
                    
                    if (cards.length === 0) {
                        if (emptyState) {
                            emptyState.style.display = 'block';
                        }
                        return true;
                    }
                    return false;
                }
                return true;
            }
            
            // 探索按钮跳转
            const exploreBtns = document.querySelectorAll('.explore-btn');
            exploreBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    window.location.href = 'discover.html';
                });
            });
            
            // 添加滚动时隐藏/显示底部导航栏功能
            let lastScrollTop = 0;
            let scrollTimer;
            const tabBar = document.querySelector('.tab-bar');
            const scrollThreshold = 20;
            
            function handleScroll() {
                const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
                
                if (Math.abs(lastScrollTop - currentScrollTop) > scrollThreshold) {
                    if (currentScrollTop > lastScrollTop && currentScrollTop > 100) {
                        tabBar.classList.add('tab-bar-hidden');
                    } 
                    else if (currentScrollTop < lastScrollTop) {
                        tabBar.classList.remove('tab-bar-hidden');
                    }
                    lastScrollTop = currentScrollTop;
                }
                
                clearTimeout(scrollTimer);
                scrollTimer = setTimeout(function() {
                    tabBar.classList.remove('tab-bar-hidden');
                }, 1000);
            }
            
            window.addEventListener('scroll', handleScroll);
        });
    </script>
</body>
</html> 